.theme-dark,
.theme-light {
    --modal-border-color: var(--outline);
    --modal-border-width: 3px;

    --modal-community-sidebar-width: 310px;
    --modal-sidebar-background: var(--dark-sidebar); //Personal
    
    --modal-nav-item-background: transparent; //Personal
    --modal-nav-item-background-hover: var(--td); //Personal
    
    --setting-item-padding: 10px 15px;
    --setting-item-background: transparent;
    --setting-item-alt-background: var(--setting-item-background);
    --setting-item-alt-background-hover: var(--td);
    --setting-item-heading-background: transparent;
    --setting-item-background-hover: var(--hvr);
    
    --setting-item-heading-border: 2px solid var(--headers);
    --setting-item-border-color: var(--table);

    //Toggle
    --toggle-width: 20px;
    --toggle-s-width: 20px;
    --toggle-border-width: 1px;
}



//Fixed Settings Padding
.vertical-tab-content {
    padding: 35px;

    & .setting-item {
        padding-left: 18px;
        padding-right: 18px;
    }
    // & .setting-item:first-child { padding: var(--setting-item-padding); }
    & .installed-plugins-container { padding: 0; }

    //Settings
    & .setting-item {
        border: 0;
        border-bottom: 1px solid;
        padding: var(--setting-item-padding);
        background: var(--setting-item-background);
        border-color: var(--setting-item-border-color);
    }
    & .setting-item-heading {
        background: var(--setting-item-heading-background);
        border-bottom: var(--setting-item-heading-border);

        &:hover { 
            background: var(--setting-item-background-hover); 
        }
    }
    .setting-item:nth-child(even):not(.setting-item-heading) {
        background-color: var(--setting-item-alt-background);

        &:hover {
            background-color: var(--setting-item-alt-background-hover);
        }
    }

}
//Setting Hover BG
.setting-item.setting-item:hover {
    background-color: var(--modal-nav-item-background-hover);
}

//Fixed Settings Sidebar
.vertical-tab-header {
    background-color: var(--modal-sidebar-background);
}
.horizontal-tab-nav-item, 
.vertical-tab-nav-item {
    background-color: var(--modal-nav-item-background);
}
//Fix Sidebar Group Title Color
.vertical-tab-header-group-title {
    color: var(--headers);
    font-size: var(--font-ui);
}

//Fix Close Button
:is(.mod-linux, .mod-windows) .titlebar-button.mod-close:hover {
    color: var(--text-dl);
}

//
.u-pop { color: var(--text); }

//Fix Button hover color
button.mod-cta:hover { 
    color: var(--text);
}


//Fixed Toggle Checkbox Dropshadow
.checkbox-container,
.checkbox-container:after
{ box-shadow: var(--toggle-shadow); }
//Fixed Toggle Small Sizing
.checkbox-container.mod-small {
    width:var(--toggle-s-width);
    height: var(--toggle-s-width);
}
//Fix Checked Checkbox Color
.checkbox-container.is-enabled {
    background-color: var(--accent);
}

.setting-item:hover .checkbox-container { box-shadow: 0 0 0 1px var(--background-modifier-border); }


//Fixed Community Theme/Plugin Styling
.community-item {
    border: var(--box-border);
    box-shadow: var(--shadow-s);
}
.community-item:hover {
    background-color: var(--modal-nav-item-background-hover);
    border-color: var(--outline);
}
//Fix Plugin Font
.community-modal-info-name {
    font-family: var(--h2-font);
    font-weight: var(--h2-weight);
}
.mod-community-modal .modal-sidebar button.clickable-icon:hover 
{ color: var(--text-dl); }
.community-modal-info { padding: var(--file-margins); }
.community-modal-search-results-wrapper {
    overflow-x: hidden;
}


//Fix Dropdown Menu Styling
.menu {
    border-width: var(--modal-border-width);
    border-color: var(--modal-border-color);
    
    // & .menu-separator {
    //     border-width: 2px;
    //     border-color: var(--modal-border-color);
    // }

    & .menu-item.selected .menu-item-icon 
    { color: var(--text-normal); }
}


// Hotkeys
.setting-hotkey,
.suggestion-hotkey {
    border-radius: var(--radius-s);
    background-color: var(--code-bg);
    color: var(--soft-text);
    font-size: 12px;
    
    box-shadow: var(--code-shadow);
}